<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="demo1">
    姓：<input type="text" placeholder="First Name" v-model="firstName" >
    名：<input type="text" placeholder="Last Name" v-model="lastName">
    姓名：<input type="text" placeholder="Full Name" v-model="fullName">
  </div>
  <script src="../vue.js"></script>
  <script>
    const vm = new Vue({
      el: '#demo1',
      data: {
        firstName: 'A',
        lastName: 'B',
      },
      // =====【重要START】=====
      computed: {
        // fullName() {
        //   return this.firstName + '-' + this.lastName
        // },
        fullName: {
          // 获取当前属性值时自动调用
          // 将返回值（根据相关的其它属性数据）作为属性值
          get() {
            return this.firstName + '-' + this.lastName
          },
          // 当属性值发生了改变时自动调用
          // 监视当前属性值变化, 
          // 同步更新相关的其它属性值
          set(value) {
            const names = value.split('-')
            this.firstName = names[0]
            this.lastName = names[1]
            // return this.firstName + '-' + this.lastName
          }
        }  
      },
      // =====【重要END】=====
      watch: {
        firstName: function(value) {
          // 相当于属性的set
          this.fullName = value + '-' + this.lastName
        }
      }
    })
    vm.$watch('lastName', function(value) {
      this.fullName = this.firstName + '-' + value
    })

  </script>
</body>
</html>